<template> <div class="page-container">
  <div class="common-content">
  <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
   <div class="search-wrap">
    <el-form :inline='true' :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" label-width="100px">
     <el-form-item label="id：">
      <el-input v-model="searchFilters.id" placeholder="请输入id"></el-input>
     </el-form-item>
     <el-form-item label="供应商代码：">
      <el-input v-model="searchFilters.supplierCode" placeholder="请输入供应商代码"></el-input>
     </el-form-item>
     <el-form-item label="发票金额：">
      <el-input v-model="searchFilters.invoiceAmount" placeholder="请输入发票金额"></el-input>
     </el-form-item>
     <el-form-item label="发票代码：">
      <el-input v-model="searchFilters.invoiceCode" placeholder="请输入发票代码"></el-input>
     </el-form-item>
     <el-form-item label="发票号：">
      <el-input v-model="searchFilters.invoiceNumber" placeholder="请输入发票号"></el-input>
     </el-form-item>
     <el-form-item label="发票日期：">
      <el-input v-model="searchFilters.invoiceDate" placeholder="请输入发票日期"></el-input>
     </el-form-item>
     <el-form-item label="发票链接：">
      <el-input v-model="searchFilters.invoiceUrl" placeholder="请输入发票链接"></el-input>
     </el-form-item>
     <el-form-item label="实际付款金额：">
      <el-input v-model="searchFilters.paymentAmount" placeholder="请输入实际付款金额"></el-input>
     </el-form-item>
     <el-form-item label="收到发票号：">
      <el-input v-model="searchFilters.receivedInvoiceNumber" placeholder="请输入收到发票号"></el-input>
     </el-form-item>

      <!-- 搜索区域按钮-查询,重置 -->
      <div class="tool-wrap">
       <div class="left-area">
        <el-button-group>
         <el-button type="primary" size="small" @click="findPage()">查询</el-button>
         <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
         <el-button type="primary" size="small" @click="addForm()">新增</el-button>
        </el-button-group>
       </div>
      </div>
      <!-- 表格数据部分 -->
      <div class="table-wrap">
       <jic-table
          :height="350"
          :operationWidth=200
          :tableList="tableList"
          :tableHeaderList="tableHeaderList"
          :totalSize="totalSize"
          :showDetailOperation=true
          :showEditOperation=true
          :showBatchDelete=false
          :showSelection=false
          :showIndex=false
          @findPage="findPage"
          @handleDetail="handleDetail"
          @handleEdit="handleEdit"
          @handleSizeChange="handleSizeChange"
          @handlePageChange="handlePageChange"
          ref="jicTable"
        ></jic-table>
      </div>
</el-form>
    </div>
   </div>
</div>
</template>
<script>
//一.导包区
import jicTable from '@/components/jicComponentGallery/jicTable';

//二.数据输出区
export default {

//2.1 注册组件
components: {
 jicTable,
},

//2.2 数据初始化区
data() { return {

  //2.2.1 公共数据初始化
pageIndex:0,
pageSize:10,
totalSize:0,//// 返回数据总条数
pageRequest: {pageNum: 1, pageSize: 10},     // 请求数据的参数
tableList: [],                               // 表格列表数据
searchSize: 'mini',

// 2.2.2 表格表头数据
tableHeaderList: [
{prop: "id", label: "id", minWidth: 100,formatter:null},
{prop: "supplierCode", label: "供应商代码", minWidth: 100,formatter:null},
{prop: "invoiceAmount", label: "发票金额", minWidth: 100,formatter:null},
{prop: "invoiceCode", label: "发票代码", minWidth: 100,formatter:null},
{prop: "invoiceNumber", label: "发票号", minWidth: 100,formatter:null},
{prop: "invoiceDate", label: "发票日期", minWidth: 100,formatter:null},
{prop: "invoiceUrl", label: "发票链接", minWidth: 100,formatter:null},
{prop: "paymentAmount", label: "实际付款金额", minWidth: 100,formatter:null},
{prop: "receivedInvoiceNumber", label: "收到发票号", minWidth: 100,formatter:null},
{prop: "fiscalYear", label: "财年", minWidth: 100,formatter:null},
{prop: "fiscalYearVoucher", label: "财务凭证号", minWidth: 100,formatter:null},
{prop: "receivedInvoiceDate", label: "收到发票日期", minWidth: 100,formatter:null},
{prop: "estimatePaymentDate", label: "预计付款日期", minWidth: 100,formatter:null},
{prop: "paymentDate", label: "实际付款日期", minWidth: 100,formatter:null},
{prop: "status", label: "状态,0代表可用，1代表停用", minWidth: 100,formatter:null},
{prop: "deptId", label: "运营方ID", minWidth: 100,formatter:null},
],// 2.2.3 搜索表单对应的数据对象初始化
searchFilters: {
 id:null,
 supplierCode:null,
 invoiceAmount:null,
 invoiceCode:null,
 invoiceNumber:null,
 invoiceDate:null,
 invoiceUrl:null,
 paymentAmount:null,
 receivedInvoiceNumber:null,
 fiscalYear:null,
 fiscalYearVoucher:null,
 receivedInvoiceDate:null,
 estimatePaymentDate:null,
 paymentDate:null,
 status:null,
 deptId:null,
 merchantId:null,
 merchantName:null,
 storeId:null,
 storeName:null,
 createTime:null,
 creator:null,
 updateTime:null,
 updator:null,
 deleteFlag:null,
},
//dialogVisible: false, //// 是否显示弹窗内容;
//editDialogVisible1: false,//// 是否可编辑弹窗内容;
//editLoading: false,////是否显示加载时动画效果;
}//return 完结;
},//data()方法 完结;

  //2.3 JavaScript 方法区
methods: {
  //2.3.1 JavaScript 公共方法区

  //2.请求列表数据
findPage(pageNum) {
      // 传过滤器的参数
  let this_ = this;
  if (this_.searchFilters === undefined || this_.searchFilters === null) {
    this_.searchFilters = {};
  }

   this_.searchFilters.pageNum = pageNum === null || pageNum === undefined ? this.pageRequest.pageNum : pageNum;
   this_.searchFilters.pageSize = this.pageRequest.pageSize;
   this.utils.request.findInvoicePaymentInfoPage(this_.searchFilters, function (res) {
   if (res.code === "0000") {
     this_.tableList = res.data.rows;
     this_.totalSize = Number(res.data.total);
   } else {
      this_.tableList = [];
      this_.totalSize = 0;
  }
  });
},

// 3.重置搜索框条件
resetForm(formName) {
 this.searchFilters = {
};
 this.findPage(null);
},

// 4.详情按钮对应的方法(TODO 需要修改路径)
handleDetail(params) {
 this.$router.push({path: "/getInvoicePaymentInfoDetail/" + params.row.id});
},

// 4.详情按钮对应的方法(TODO 需要修改路径)
handleEdit(params) {
 this.$router.push({path: "/getInvoicePaymentInfoDetail/" + params.row.id});
},

addForm(params) {
 params =null;this.$router.push({path: "/getInvoicePaymentInfoDetail/" + params});
},
// 5.请求条数发生变化
handleSizeChange(params) {
 this.pageRequest.pageSize = params.size;
},

// 6.请求页数发生变化
handlePageChange(params) {
this.pageRequest.pageNum = params.number;
this.findPage();
},
// 7.页面弹窗处理方法
add() {
this.dialogVisible = true;
},

// 8.关闭弹窗
handleClose() {
this.dialogVisible = false;
},

//==========2.3.1 JavaScript 自定义方法区==========





},
//1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
mounted() {
 this.findPage();
},

}
</script>
<style lang="scss" scoped>
  /* ele组件样式重置 */
  .common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
      .el-form-item__label {
        height: 32px;
        line-height: 32px;
      }

      .el-form-item__content {
        height: 32px;
        line-height: 32px;
        width: 150px;
      }

      .el-input--mini .el-input__inner {
        height: 32px;
        line-height: 32px;
      }

      .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 150px;
      }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
      width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
      width: 100%;
      height: auto;
      position: relative;
      overflow: hidden;

      .left-area {
        float: left;
        width: 50%;
        text-align: left;

        button {
          margin-right: 15px;
          border-radius: 5px;
        }
      }

      .right-area {
        float: right;
        width: 50%;
        text-align: right;
      }
    }

    /* 表格部分样式 */
    .table-wrap {
      width: 100%;
      max-height: 600px;
      margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
      text-align: center !important;
    }
  }
</style>
